import React, {useState} from "react";

import {ActivityIndicator} from "antd-mobile";


export default function LoadingImage(props) {
    let {src, onLoad} = props;

    let [loading, setLoading] = useState(true);

    return (
        <div style={{position: "relative", height: "100%"}}>
            {loading ? (
                <div style={{
                    position: "absolute",
                    top: 0,
                    left: 0,
                    backgroundColor: "rgba(255,255,255,.6)",
                    width: "100%",
                    height: "100%"
                }}>
                    <div style={{
                        position: "absolute",
                        top: "50%",
                        left: "50%",
                        transform: "translate(-50%,-50%)"
                    }}>
                        <ActivityIndicator size={"large"}/>
                    </div>
                </div>
            ) : ""}
            {src ? (
                <img {...props} onLoad={() => {
                    setLoading(false);
                    onLoad && onLoad();
                }}/>
            ) : ""}
        </div>

    )
}